<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-lang="page_title">个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo" data-lang="site_logo">我的作品集</div>
            <ul class="nav-links">
                <li><a href="#home" data-lang="nav_home">首页</a></li>
                <li><a href="#about" data-lang="nav_about">关于我</a></li>
                <li><a href="#projects" data-lang="nav_projects">项目作品</a></li>
                <li><a href="#contact" data-lang="nav_contact">联系我</a></li>
                <li class="language-switcher">
                    <button id="lang-zh" class="lang-btn active" data-lang="zh">中文</button>
                    <button id="lang-en" class="lang-btn" data-lang="en">English</button>
                </li>
                <!-- 深色模式切换 -->
                <li class="theme-toggle">
                    <span class="theme-icon">🌞</span>
                    <label class="theme-switch">
                        <input type="checkbox" id="theme-toggle">
                        <span class="slider"></span>
                    </label>
                    <span class="theme-icon">🌙</span>
                </li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>

    <section id="home" class="hero">
        <div class="hero-content">
            <h1><span data-lang="hero_greeting">你好，我是</span><span class="highlight">cc</span></h1>
            <p data-lang="hero_description">专业从事UI/UX设计、网页开发和图形设计的创意工作者</p>
            <a href="#projects" class="btn" data-lang="view_projects">查看我的作品</a>
        </div>
    </section>

    <section id="about" class="about">
        <div class="container">
            <h2 data-lang="about_heading">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://kirineko.github.io/hita.png" alt="个人照片">
                </div>
                <div class="about-text">
                    <p data-lang="about_para1">大家好，我是一名专业的Python Developer，擅长消息中间件、实时数据处理和高可用架构设计。我对技术充满热情，不断追求创新和卓越。</p>
                    <p data-lang="about_para2">在业余时间，我喜欢学习Rust语言，同时也是动漫爱好者，特别喜欢《幸运星》、《孤独摇滚》和《摇曳露营》等作品。</p>
                    
                    <div class="skills">
                        <h3 data-lang="skills_heading">专业技能</h3>
                        <ul>
                            <li class="skill-proficient">Python <span class="skill-level" data-lang="skill_level_proficient">精通</span></li>
                            <li class="skill-proficient">MongoDB <span class="skill-level" data-lang="skill_level_proficient">精通</span></li>
                            <li class="skill-intermediate">Next.js <span class="skill-level" data-lang="skill_level_intermediate">熟练</span></li>
                            <li class="skill-intermediate">ElasticSearch <span class="skill-level" data-lang="skill_level_intermediate">熟练</span></li>
                            <li class="skill-beginner">Rust <span class="skill-level" data-lang="skill_level_beginner">入门</span></li>
                        </ul>
                    </div>
                    
                    <div class="experience">
                        <h3 data-lang="experience_heading">专业经历</h3>
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-date" data-lang="timeline_2021_2023">2021-2023</div>
                                <div class="timeline-content">
                                    <h4 data-lang="timeline_openai">OpenAI</h4>
                                    <p data-lang="timeline_openai_desc">软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date" data-lang="timeline_2017_2020">2017-2020</div>
                                <div class="timeline-content">
                                    <h4 data-lang="timeline_google">Google</h4>
                                    <p data-lang="timeline_google_desc">软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date" data-lang="timeline_2014_2016">2014-2016</div>
                                <div class="timeline-content">
                                    <h4 data-lang="timeline_stanford">斯坦福大学</h4>
                                    <p data-lang="timeline_stanford_desc">硕士</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date" data-lang="timeline_2010_2014">2010-2014</div>
                                <div class="timeline-content">
                                    <h4 data-lang="timeline_tsinghua">清华大学</h4>
                                    <p data-lang="timeline_tsinghua_desc">本科</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="achievements">
                        <h3 data-lang="achievements_heading">个人成就</h3>
                        <ul>
                            <li data-lang="achievement1">清华大学优秀毕业生</li>
                            <li data-lang="achievement2">微软MVP</li>
                            <li data-lang="achievement3">华为开发者认证</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="projects" class="projects">
        <div class="container">
            <h2 data-lang="projects_heading">项目作品</h2>
            <div class="project-grid">
                <div class="project-item">
                    <div class="project-image">
                        <img src="https://picsum.photos/id/160/800/600" alt="项目1">
                    </div>
                    <div class="project-info">
                        <h3 data-lang="project1_title">项目名称1</h3>
                        <p data-lang="project1_desc">项目简短描述，介绍项目的目标和成果。</p>
                        <a href="#" class="project-link" data-lang="view_details">查看详情</a>
                    </div>
                </div>
                <div class="project-item">
                    <div class="project-image">
                        <img src="https://picsum.photos/id/237/800/600" alt="项目2">
                    </div>
                    <div class="project-info">
                        <h3 data-lang="project2_title">项目名称2</h3>
                        <p data-lang="project2_desc">项目简短描述，介绍项目的目标和成果。</p>
                        <a href="#" class="project-link" data-lang="view_details">查看详情</a>
                    </div>
                </div>
                <div class="project-item">
                    <div class="project-image">
                        <img src="https://picsum.photos/id/325/800/600" alt="项目3">
                    </div>
                    <div class="project-info">
                        <h3 data-lang="project3_title">项目名称3</h3>
                        <p data-lang="project3_desc">项目简短描述，介绍项目的目标和成果。</p>
                        <a href="#" class="project-link" data-lang="view_details">查看详情</a>
                    </div>
                </div>
                <div class="project-item">
                    <div class="project-image">
                        <img src="https://picsum.photos/id/488/800/600" alt="项目4">
                    </div>
                    <div class="project-info">
                        <h3 data-lang="project4_title">项目名称4</h3>
                        <p data-lang="project4_desc">项目简短描述，介绍项目的目标和成果。</p>
                        <a href="#" class="project-link" data-lang="view_details">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <h2 data-lang="contact_heading">联系我</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <p data-lang="contact_description">如果您对我的作品感兴趣，或者有任何合作机会，请随时与我联系。</p>
                    <ul>
                        <li><i class="email"></i> kirineko@qq.com</li>
                    </ul>
                    <div class="social-links">
                        <a href="https://kirineko.github.io" target="_blank" class="social-link">
                            <i class="icon icon-website"></i>
                            <span data-lang="website_link">个人网页</span>
                        </a>
                        <a href="mailto:kirineko@qq.com" class="social-link">
                            <i class="icon icon-email"></i>
                            <span data-lang="email_link">电子邮箱</span>
                        </a>
                    </div>
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name" data-lang="form_name">您的姓名</label>
                            <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
                        </div>
                        <div class="form-group">
                            <label for="email" data-lang="form_email">电子邮箱</label>
                            <input type="email" id="email" name="email" placeholder="请输入您的邮箱" required>
                        </div>
                        <div class="form-group">
                            <label for="message" data-lang="form_message">留言内容</label>
                            <textarea id="message" name="message" rows="5" placeholder="请输入您的留言" required></textarea>
                        </div>
                        <button type="submit" class="btn" data-lang="form_submit">发送留言</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p data-lang="footer_text">&copy; 2023 设计师姓名. 保留所有权利.</p>
        </div>
    </footer>

    <script src="main.js"></script>
</body>
</html>